<!--
 * @Author: 陈焕杰
 * @Date: 2020-06-29 16:07:56
 * @LastEditTime: 2020-07-06 09:46:00
 * @LastEditors: Please set LastEditors
 * @Description: 订单价格
 * @FilePath: \mobile_project\src\pages\user\orders\orderDetail\components\price.vue
--> 

<template>
  <div class="price">
    <div class="list">
      <span class="left">商品金额</span>
      <span class="right">{{order.goods_amount | rmb}}</span>
    </div>
    <div class="list">
      <span class="left">运费</span>
      <span class="right">+{{order.shipping_fee | rmb}}</span>
    </div>
    <div class="list">
      <span class="left">优惠券折扣</span>
      <span class="right">-{{order.level_discount | rmb}}</span>
    </div>
    <van-cell center>
      <template #title>
        <span>总计:{{order.order_amount | rmb}}</span>
      </template>
      <template>
        <van-button
          v-if="order.final_status === 'un_paid'"
          size="small"
          @click="cancel"
        >取消订单</van-button>
        <van-button v-if="order.final_status === 'un_paid'" color="#ff4755" size="small" :to="{path:'/orderpay',query:{id:this.$route.query.id}}">去付款</van-button>
      </template>
    </van-cell>
  </div>
</template>

<script>
import * as api from "@/api/apiList/order/order"
export default {
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  methods: {
    cancel() {
      this.$dialog.confirm({
        message: "确认取消订单吗？"
      })
        .then(async () => {
          await api.order_cancel(this.$route.query.id)
          await location.reload()
        })
        .catch(() => {
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.price {
  margin: 10px 0;
  .list {
    display: flex;
    justify-content: space-between;
    margin: 5px 15px;
    .left {
      font-size: 14px;
      color: #999;
    }
    .right {
      font-size: 14px;
      color: #ff4755;
    }
  }
  .van-cell {
    margin-top: 10px;
    .van-button {
      height: 30px;
    }
  }
}
</style>